<template>
  <section class="echartHeader-wrapper">
    <!-- 下拉框 -->
    <div class="sel-box">
      <div class="sel-multiple" v-if="seltype === 'multiple'">
        <span>指标 : </span>
        <a-select
          class="echartsMultipleSel"
          style="min-width: 150px"
          mode="multiple"
          v-model="indicatorIds"
          placeholder="请选择指标"
          @change="multipleChange"
        >
          <a-select-option
            v-for="(item, index) in multipleOptions.length > 0 &&
            multipleOptions"
            :key="index"
            :value="item.id"
          >
            {{ item.indicatorName }}
          </a-select-option>
        </a-select>
      </div>
      <div class="sel-single" v-if="seltype === 'single'">
        <a-select
          style="min-width: 150px"
          v-model="formData.sectionNum"
          placeholder="请选择指标"
          @change="singleChange"
        >
          <a-select-option
            v-for="(item, index) in singleOptions"
            :key="index"
            :value="item"
          >
            第{{ item }}节
          </a-select-option>
        </a-select>
      </div>
    </div>
    <!-- 电阻之类的 -->
    <ul class="list-box" v-if="listsShow">
      <li
        class="list-item"
        v-for="(item, index) in list"
        :key="index"
        :class="{ active: item.key === formData.type }"
        @click="changeTab(item.key)"
      >
        {{ item.label }}
      </li>
    </ul>
  </section>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  props: ["multipleOptions", "singleOptions", "seltype", "listsShow"],
  data() {
    return {
      indicatorIds: [],
      formData: {
        type: "voltage",
        sectionNum: 1,
        type_txt: "电压",
      },
      tabActive: "voltage",
      list: [
        { key: "voltage", label: "电压" },
        { key: "inResistance", label: "内阻" },
        { key: "temperature", label: "温度" },
      ],
    };
  },
  computed: {
    ...mapGetters(["deviceId"]),
  },
  watch: {
    multipleOptions: {
      handler() {
        this.initData();
      },
      // deep: true,
      // immediate: true,
    },
    deviceId: {
      handler() {
        this.indicatorIds = [];
      },
    },
    singleOptions: {
      handler() {
        if (this.formData.sectionNum === undefined) {
          this.initData();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // this.initData()
  },
  methods: {
    ...mapMutations("echartConfig", ["SET_SELFORMDATA", "SET_DEVICEIDCHANGE"]),
    initData() {
   
      this.SET_SELFORMDATA(this.formData);
      if (this.multipleOptions && this.multipleOptions.length > 0) {
        if (this.indicatorIds.length === 0) {
          this.indicatorIds = [this.multipleOptions[0].id];
        }
      }
      if (this.singleOptions && this.singleOptions > 0) {
        this.formData.sectionNum = 1;
      }
    },
    changeTab(index) {
      this.formData.type = index;
      this.formData.type_txt = this.list.filter(
        (item) => item.key === index
      )[0].label;
      this.setValue();
      this.$emit("ok", this.formData, "single");
    },
    multipleChange() {
      this.SET_SELFORMDATA({ indicatorIds: this.indicatorIds });
      // 设备id是否变化
      // this.SET_DEVICEIDCHANGE(false);
      this.$emit("ok", { indicatorIds: this.indicatorIds }, "multiple");
    },
    singleChange() {
      this.setValue();
      this.$emit("ok", this.formData, "single");
    },
    setValue() {
      this.SET_SELFORMDATA(this.formData);
    },
  },
};
</script>

<style lang="scss">
.echartHeader-wrapper {
  display: flex;
  position: absolute;
  top: 4px;
  right: 10px;

  .sel-box {
    margin: 0 10px 0 auto;
    .echartsMultipleSel {
      max-width: 300px;
      max-height: 36px;
      vertical-align: middle;
      overflow: auto;
    }
  }
  .list-box {
    display: flex;
    margin-left: auto;
    .list-item {
      padding: 6px 14px;
      border: 1px solid #226fab;
      cursor: pointer;
      border-left: 0;
      &:first-child {
        border-radius: 20px 0 0 20px;
        border-left: 1px solid #226fab;
      }
      &:last-child {
        border-radius: 0 20px 20px 0;
      }
      &.active {
        background: #2e90d4;
      }
    }
  }
}
</style>